import Vue from "vue";
import { Component, Prop } from "vue-property-decorator";
import "./app-visual-checkbox.less";

/**
 * @description 虚拟表单选择框
 * @export
 * @class AppVisualCheckbox
 * @extends {Vue}
 */
@Component({})
export class AppVisualCheckbox extends Vue {
  /**
   * @description 编辑器实列
   * @type {*}
   * @memberof AppVisualCheckbox
   */
  @Prop() editorInstance!: any;

  /**
   * @description 表单项
   * @type {*}
   * @memberof AppVisualCheckbox
   */
  @Prop() public parentItem!: any;

  /**
   * @description 编辑器值
   * @type {string}
   * @memberof AppVisualCheckbox
   */
  @Prop() public value!: string;

  /**
   * @description 编辑器名称
   * @type {string}
   * @memberof AppVisualCheckbox
   */
  @Prop() public name!: string;

  /**
   * @description 编辑器位置
   * @type {*}
   * @memberof AppVisualCheckbox
   */
  @Prop() public position!: any;

  /**
   * @description 真实控件
   * @type {string}
   * @memberof AppVisualCheckbox
   */
  @Prop() realCompRef!: any;

  /**
   * @description 点击选项框
   * @param {boolean} value
   * @memberof AppVisualCheckbox
   */
  public onClick(event: any) {
    this.$emit("change", {
      name: this.name,
      value: Object.is(event.target.value, '1') ? 0 : 1,
    });
  }

  /**
   * @description 绘制组件
   * @return {*}
   * @memberof AppVisualCheckbox
   */
  public render() {
    return (
      <div
        class={"app-visual-checkbox luckysheet-mousedown-cancel"}
        style={{
          height: `${this.position.height}px`,
        }}
      >
        <input
          type="checkbox"
          class="checkbox__inner luckysheet-mousedown-cancel"
          disabled={this.realCompRef.disabled || this.realCompRef.readonly}
          value={this.realCompRef.value}
          checked={this.realCompRef.CurrentVal}
          onClick={(event) => {
            this.onClick(event);
          }}
        />
      </div>
    );
  }
}
